<!DOCTYPE html>
<html>
<head>
  <meta lang="zh"/>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>互联网租赁自行车综合治理平台</title>
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css"/>
  <link rel="stylesheet" href="./bootstrap/css/font-awesome.min.css"/>
  <script src="./sha256.js"></script>
  <script src="./md5.js"></script>
  <script src="./jquery.min.js"></script>
  <script src="./jquery.form.min.js"></script>

</head>
<style type="text/css">
  .form-horizontal {
    position: absolute;
    left: 50%;
    top: 30%;
    margin-left: -225px;
    /*margin-top: 175px;*/
    width: 400px;
    height: 350px;
    background: #076691;
    border-radius: 15px;
    text-align: center;
  }

  .form-horizontal .heading {
    color: #eeeeee;
    display: block;
    font-size: 35px;
    font-weight: 700;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 30px;
  }

  .form-horizontal .form-group {
    padding: 0 40px;
    margin: 0 0 25px 0;
    position: relative;
  }

  .form-horizontal .form-control {
    background: #f0f0f0;
    border: none;
    border-radius: 20px;
    box-shadow: none;
    padding: 0 20px 0 45px;
    height: 40px;
    transition: all 0.3s ease 0s;
  }

  .form-horizontal .form-control:focus {
    background: #e0e0e0;
    box-shadow: none;
    outline: 0 none;
  }

  .form-horizontal .form-group i {
    position: absolute;
    top: 12px;
    left: 60px;
    font-size: 17px;
    color: #c8c8c8;
    transition: all 0.5s ease 0s;
  }

  .form-horizontal .form-control:focus + i {
    color: #00b4ef;
  }

  .form-horizontal .fa-question-circle {
    display: inline-block;
    position: absolute;
    top: 12px;
    right: 60px;
    font-size: 20px;
    color: #808080;
    transition: all 0.5s ease 0s;
  }

  .form-horizontal .fa-question-circle:hover {
    color: #000;
  }

  .form-horizontal .main-checkbox {
    float: left;
    width: 20px;
    height: 20px;
    background: #11a3fc;
    border-radius: 50%;
    position: relative;
    margin: 5px 0 0 5px;
    border: 1px solid #11a3fc;
  }

  .form-horizontal .main-checkbox label {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }

  .form-horizontal .main-checkbox label:after {
    content: "";
    width: 10px;
    height: 5px;
    position: absolute;
    top: 5px;
    left: 4px;
    border: 3px solid #fff;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .form-horizontal .main-checkbox input[type=checkbox] {
    visibility: hidden;
  }

  .form-horizontal .main-checkbox input[type=checkbox]:checked + label:after {
    opacity: 1;
  }

  .form-horizontal .text {
    float: left;
    margin-left: 7px;
    line-height: 20px;
    padding-top: 5px;
    text-transform: capitalize;
  }

  .form-horizontal .btn {
    /*float: right;*/
    font-size: 14px;
    color: #fff;
    background: #00b4ef;
    border-radius: 30px;
    padding: 10px 25px;
    border: none;
    margin-right: 10px;
    text-transform: capitalize;
    transition: all 0.5s ease 0s;
  }

  @media only screen and (max-width: 479px) {
    .form-horizontal .form-group {
      padding: 0 25px;
    }

    .form-horizontal .form-group i {
      left: 45px;
    }

    #buttonIndex {
      width: 100%;
      text-align: center;
      margin-right: 10px;
    }

    .form-horizontal .btn {
      padding: 10px 20px;
    }
  }

  .logoH1 {
    width: 100%;
    text-align: center;
    font: 55px/150px "微软雅黑";
    /*font-weight: bold;*/
    color: rgba(17, 185, 92, 1);
    display: inline-block;
    /* background: linear-gradient(120deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 1) 180px, rgba(255, 255, 255, 0) 270px);
     background-position: -300px 0;
     background-repeat: no-repeat;
     -webkit-background-clip: text;*/
    vertical-align: top;
  }
</style>
<style type="text/css">
  body, html {
    font-size: 100%;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%
  }

  /* Reset */
  *,
  *:after,
  *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
  .clearfix:before,
  .clearfix:after {
    content: " ";
    display: table;
  }

  .clearfix:after {
    clear: both;
  }

  body {
    /*background: linear-gradient(top,#142845,#007e9d);*/
    /*background: -moz-linear-gradient( top,#ccc,#000);*/
    background-image: linear-gradient(#142845, #007e9d);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #142845, #007e9d);
    /*!* Safari 4-5, Chrome 1-9 *!*/
    /*!* -webkit-gradient(,  [, ]?,  [, ]? [, ]*) *!*/
    /*background: -webkit-gradient(linear,top,from(#142845),to(#007e9d));*/
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(top, #142845, #007e9d);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #142845, #007e9d);
    /*background:#00b4ef;*/
  }

  a {
    color: rgba(255, 255, 255, 0.6);
    outline: none;
    text-decoration: none;
    -webkit-transition: 0.2s;
    transition: 0.2s;
  }

  a:hover, a:focus {
    color: #74777b;
    text-decoration: none;
  }

  article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
  }

  audio, canvas, video {
    display: inline-block;
  }

  audio:not([controls]) {
    display: none;
    height: 0;
  }

  [hidden] {
    display: none;
  }

  html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
  }

  a:focus {
    outline: thin dotted;
  }

  a:active, a:hover {
    outline: 0;
  }

  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }

  abbr[title] {
    border-bottom: 1px dotted;
  }

  b, strong {
    font-weight: bold;
  }

  dfn {
    font-style: italic;
  }

  hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
  }

  mark {
    background: #ff0;
    color: #000;
  }

  code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
  }

  pre {
    white-space: pre-wrap;
  }

  q {
    quotes: "\201C" "\201D" "\2018" "\2019";
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup {
    top: -0.5em;
  }

  sub {
    bottom: -0.25em;
  }

  img {
    border: 0;
  }

  svg:not(:root) {
    overflow: hidden;
  }

  figure {
    margin: 0;
  }

  fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
  }

  legend {
    border: 0;
    padding: 0;
  }

  button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
  }

  button, input {
    line-height: normal;
  }

  button, select {
    text-transform: none;
  }

  button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
  }

  button[disabled], html input[disabled] {
    cursor: default;
  }

  input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }

  input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
  }

  textarea {
    overflow: auto;
    vertical-align: top;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .MSGdiv {
    margin-top: -22px;
    color: red;
    font-size: 12px;
  }

  .msg {
    visibility: hidden;
  }

  .msgVisible {
    visibility: visible;
  }

  .code {
    width: 60%;
    display: inline-block;
    margin-right: 145px !important;

  }
  .codeWrap {
    position: relative;
    width: 100%;
    height: 45px;
    margin-bottom: 21px;
  }

  #code {
    margin-right: 148px
  }

  .codeImg {
    position: absolute;
    right: 0px;
    display: inline-block;
    width: 120px;
    height: 45px;
    background: #6b4d19;
    margin-left: -20px;
    margin-bottom: 15px;
    margin-right: 50px;

  }

  .msgContent {
    position: absolute;
    font-size:10px;
    bottom: 5px;
    width: 100%;
    text-align: center;
    color: #00ffff;

  }
  .msgContent span{
    margin-left: -50px;
  }

</style>

<body>

<div class="demo" style="padding: 20px 0;">
  <div class="container">
    <h1 class="logoH1">
      <!--<img class="logoImg" src="./logo.png">-->
      互联网租赁自行车综合治理平台</h1>
    <div class="row">
      <div class="col-md-offset-3 col-md-6">
        <!--<form class="form-horizontal" action="http://120.78.90.195:8001/ulink-admin/login" method="post">-->
        <form class="form-horizontal" action="./doLogin" method="post" id="formLogin" name="formLogin">
          <span class="heading">用户登录</span>
          <div class="form-group">
            <input class="form-control" name="username" id="username" placeholder="用户名"/>
            <i class="fa fa-user"></i>
          </div>
          <div class="MSGdiv"><span id="userMsg" class="msg">账号不存在</span></div>
          <div class="form-group help">
            <input type="password" class="form-control" id="inputPassword3" name="password" placeholder="密　码"/>
            <i class="fa fa-lock"></i>
          </div>
          <div class="MSGdiv"><span id="PasswordMsg" class="msg">密码错误</span></div>
          <div class="codeWrap">
            <div class="form-group code">
              <input class="form-control" name="code" id="codeInfo" placeholder="验证码"/>
              <i class="fa fa-lock"></i>
            </div>
            <div class="codeImg">
              <!-- <img alt="这是图片" src="/img/001.png"/> -->
              <img alt="验证码" id="clickImg" onclick="this.src='./defaultKaptcha?d='+new Date()*1" src="./defaultKaptcha"/>
            </div>
          </div>
          <div class="MSGdiv"><span id="code" class="msg">验证码错误</span></div>
          <div class="form-group " id="buttonIndex">
            <!--<div class="main-checkbox">-->
            <!--<input type="checkbox" value="None" id="checkbox1" name="check"/>-->
            <!--<label for="checkbox1"></label>-->
            <!--</div>-->
            <!--<span class="text">记住密码</span>-->
            <button type="button" class="btn btn-default" id="btnLogin">登录</button>
            <button type="reset" class="btn btn-default">重置</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="msgContent"><span>推荐使用Chrome或火狐浏览器，IE浏览器仅支持IE9及以上版本</span></div>
<script>

  $(document).ready(function () {
    $('#btnLogin').click(function () { ajaxLogin()})
    $(window).keydown(function(event){

	  //<![CDATA[
		event=event||window.event
		  if(event.keyCode===13&&$('#username').val()&&$('#inputPassword3').val()&&$('#codeInfo').val()){
		    ajaxLogin()
		  }
		//]]>



    });
    function ajaxLogin() {
      $.ajax({
        url: './doLogin',
        method: 'POST',
        dataType:'json',
        contentType:'application/json;charset=UTF-8',
        data: JSON.stringify({
          username: $('#username').val(),
          password: md5(sha256($('#inputPassword3').val())),
          code: $('#codeInfo').val()
        }),
        success: function (data) {
          if (data.state == 0) {
            onclickImg()
            $('#userMsg').text('账号不存在')
            toggleClass('#userMsg')

          } else if (data.state == 1) {
            onclickImg()
            $('#PasswordMsg').text('密码错误,还剩下 ' + data.count + ' 次')
            toggleClass('#PasswordMsg')

          } else if (data.state == 2) {
            onclickImg()
            alert('密码输错5次，请明天再试')

          } else if (data.state == 4) {
            onclickImg()
            toggleClass('#code')

          } else if(data.state == 5){
          	 onclickImg()
          	 $('#userMsg').text('账号已被禁用')
            toggleClass('#userMsg')

          }else if (data.state == 3) {

            window.location.href = data.url
            //location.reload()
          }

          function onclickImg(){
            $("#clickImg").attr("src",'./defaultKaptcha?d='+new Date()*1);
          }
          function toggleClass(htmlB) {
            $(htmlB).addClass('msgVisible');
            setTimeout(function () {
              $(htmlB).removeClass('msgVisible');
            }, 2000)
          }

        }
      })

    }
  })
</script>
</body>
</html>
